<template>
  <div>
    <el-dialog
      title="上传策略到服务端"
      :model-value="visible"
      :close-on-click-modal="false"
      :center="true"
      :destroy-on-close="true"
      width="600px"
      @open="getTreeData"
      @close="visible = false"
    >
      <div class="config-body">
        <el-form ref="formRef" :model="form" :rules="formRules" label-width="auto">
          <el-form-item label="策略类型">
            {{ strategyType }}
          </el-form-item>
          <el-form-item prop="strategyName" label="策略名称">
            <el-input v-model="form.strategyName"></el-input>
          </el-form-item>
          <el-form-item prop="deviceId" label="策略来源">
            <el-tree-select
              v-model="form.deviceId"
              :data="treeData"
              :props="treeProps"
              node-key="deviceId"
              :render-after-expand="false"
            >
              <template #default="{ node }">
                <div class="node-lable">
                  <i
                    v-if="node.data.type === 'device'"
                    :class="node.data.online ? 'is-online' : ''"
                  ></i>
                  <p
                    :title="
                      node.data.type === 'device'
                        ? node.label + (node.data.online ? ' 在线' : ' 离线')
                        : node.label
                    "
                  >
                    {{ node.label }}
                  </p>
                </div>
              </template>
            </el-tree-select>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="handleExport(formRef)">确定</el-button>
          <el-button @click="visible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from "vue";
import { useTreeStore } from "~/utils/pinia/tree.js";
import { ElMessage } from "element-plus";
import { req_loadGroupTree, req_exportStrategyToServer } from "~/utils/axios/common.js";
const treeStore = useTreeStore();
const visible = defineModel();
const props = defineProps({
  type: {
    type: String,
    default: "",
  },
});
const strategyType = computed(() => {
  return treeStore.treeStrategyTypeList.find((item) => item.name == props.type).desc;
});
const formRef = ref();
const form = reactive({
  strategyName: "",
  deviceId: "",
});
const formRules = {
  strategyName: [{ required: true, message: "请输入策略名称", trigger: "blur" }],
  deviceId: [{ required: true, message: "请选择策略来源设备", trigger: "change" }],
};

const treeProps = ref({
  label: "name",
  children: "child",
  value: "value",
});
const treeData = ref([
  {
    value: 1,
    name: "全部分组",
    type: "all",
    child: [],
  },
]);
const getTreeData = async () => {
  form.deviceId = "";
  form.strategyName = "";
  const { data: res } = await req_loadGroupTree();
  res.forEach((item) => {
    item["value"] = item.id;
    if (item.child) {
      item.child.forEach((c) => {
        c["value"] = c.deviceId;
        if (!c.online) {
          c["disabled"] = true;
        }
        const i = treeStore.treeStrategyTypeList.find((item) => item.name == props.type);
        if (!i[c.osType]) {
          c["disabled"] = true;
        }
      });
    } else {
      item["disabled"] = true;
    }
  });
  treeData.value[0].child = res;
};
const handleExport = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      let params = {
        type: props.type,
        strategyName: form.strategyName,
      };
      req_exportStrategyToServer(form.deviceId, params).then((res) => {
        res.data.succeed ? ElMessage.success("上传成功") : ElMessage.error("上传失败");
        visible.value = false;
        treeStore.treeLinkedTableRef.getTableData();
      });
    }
  });
};
</script>

<style lang="scss" scoped>
.node-lable {
  display: flex;
  // justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-right: 25px;
  i {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-image: linear-gradient(#ffb340 0, #ff9900 100%);
    margin-right: 5px;
  }
  .is-online {
    background-image: linear-gradient(#24ec60 0, #1fe159 100%);
  }
  p {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
</style>
